<template>
  <el-form :model="formData" label-width="120px">
    <el-form-item label="商品名称">
      <el-input v-model="formData.name" />
    </el-form-item>
    <el-form-item label="副标题">
      <el-input v-model="formData.subName" :rows="2" type="textarea" />
    </el-form-item>
    <el-form-item label="商品图片">
      <el-space wrap>
        <Tuku v-model="formData.img1"></Tuku>
        <Tuku v-model="formData.img2"></Tuku>
        <Tuku v-model="formData.img3"></Tuku>
      </el-space>

    </el-form-item>
    <el-form-item label="类目">
      <CategoryTree v-model="formData.categoryId"></CategoryTree>
    </el-form-item>
    <el-form-item label="排序">
      <el-input-number v-model="formData.seq" :min="1" :max="99" />
    </el-form-item>
    <el-form-item label="价格">
      <el-input-number v-model="formData.price" :precision="2" :step="0.1" />
    </el-form-item>
    <el-form-item label="标签">
      <el-input v-model="formData.tags" :rows="2" type="textarea" />
    </el-form-item>
    <el-form-item label="描述">
      <Editor v-model="formData.brief"></Editor>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">添加</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue"
import CategoryTree from "@/components/CategoryTree.vue";
import Tuku from "@/components/Tuku.vue";
import Editor from "@/components/Editor.vue";
import { productApi } from '@/api'
import { ElMessage } from 'element-plus'
const formData = reactive({
  name: "",
  subName: "",
  img1: "", img2: "", img3: "",
  price: 0,
  seq: 0,
  tags: '',
  categoryId: 0,
  brief: ""
})

const onSubmit = () => {
  let imgs = []
  if (formData.img1 != "") {
     imgs.push(formData.img1); 
     formData.img1 = "" }
  if (formData.img2 != "") {
    imgs.push(formData.img2);
    formData.img2 = ""
  }
  if (formData.img3 != "") {
    imgs.push(formData.img3);
    formData.img3 = ""
  }

  productApi.insert.call({ img: imgs.join(","), ...formData }).then((res) => {
    ElMessage.success("新增成功")

  })

}

</script>